<script setup lang="ts">
import { ref, defineProps, computed, defineEmits } from 'vue';

import { PostCatrgoryModel } from '@/api/post/response';
import { GetPostesApiRequest } from '@/api/post/request';

const { categories } = defineProps<{
  categories: Array<PostCatrgoryModel>
}>();

const emit = defineEmits(['switchCategory']);

const activeBtn = ref("");

function clickCatrgory(name: string) {
  activeBtn.value = name;
  emit("switchCategory", new GetPostesApiRequest(name));
}

function setActiveClass(name: string): string {
  if (name == activeBtn.value)
    return "active";
  return ""
}

const isShow = computed(() => {
  if (categories.length == 0) {
    return "display: none;"
  }
  else {
    return "display: block;"
  }
})

</script>

<template>
  <header :style="isShow">
    <nav>
      <ul>
        <li><a @click.prevent="clickCatrgory('')" href="#" :class="setActiveClass('')">全部</a></li>
        <li v-for="item in categories" :key="item.id">
          <a @click.prevent="clickCatrgory(item.name)" href="#" :class="setActiveClass(item.name)">
            {{ item.name }}
          </a>
        </li>
      </ul>
    </nav>
  </header>
</template>

<style scoped lang="scss">
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);

$activeColor: #2ba6cb;
$bgColor: #1d1f20;

body {
  background-color: $bgColor;
  font-family: 'Roboto Condensed', sans-serif;
}

header {
  background-color: darken($bgColor, 2%);
  border-radius: 90px;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.05), inset 1px 1px 1px rgba(0, 0, 0, 0.3);
  left: 50%;
  max-width: 800px;
  top: 50%;
  width: 100%;
}

nav {
  border-radius: 90px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  margin: .5em;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  a {
    background-color: lighten($bgColor, 10%);
    color: #fff;
    display: block;
    line-height: 1em;
    padding: 1em;
    text-align: center;
    text-decoration: none;
    transition: all 100ms ease-out;

    &:hover,
    &:active,
    &.active {
      background-color: $activeColor;
      box-shadow: inset 0 -.3em 0 rgba(0, 0, 0, 0.3);
      margin-top: -.3em;
      padding-bottom: 1.3em;
      position: relative;

      &:after {
        background-color: rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid transparentize($activeColor, 0.3);
        bottom: -.5em;
        content: '';
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        top: .3em;
      }

    }
  }

  li {
    flex: 1;

    &+li {
      box-shadow: -2px 0 0 rgba(0, 0, 0, 0.2), -1px 0 0 rgba(255, 255, 255, 0.15);
    }

    &:first-child a {
      border-top-left-radius: 90px;
      border-bottom-left-radius: 90px;

      &:hover:after,
      &:active:after,
      &.active:after {
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
        left: -.5em;
      }
    }

    &:last-child a {
      border-top-right-radius: 90px;
      border-bottom-right-radius: 90px;

      &:hover:after,
      &:active:after,
      &.active:after {
        border-top-right-radius: inherit;
        border-bottom-right-radius: inherit;
        right: -.5em;
      }
    }
  }
}
</style>
